<template>
  <div class="contest-detail">
    <contest-tab-bar :contest-model="contestModel"/>
    <el-card>
      <div class="contest-menu">
        <div class="contest-menu-item" @click="handleRoute('contest-dashboard')"><i
            class="el-icon-data-board"></i><span>比赛简介</span></div>

        <div class="contest-menu-item" @click="handleRoute('contest-problem-list')"><i
            class="el-icon-collection"></i><span>题目列表</span>
        </div>
        <div class="contest-menu-item" @click="handleRoute('contest-announcement-list')">
          <i class="el-icon-news"></i><span>比赛公告</span>
        </div>
        <div class="contest-menu-item" @click="handleRoute('contest-submission-list')">
          <i class="el-icon-position"></i><span>比赛提交</span>
        </div>

        <div class="contest-menu-item" @click="handleRoute('contest-ranking')">
          <i class="el-icon-medal-1"></i><span>比赛排名</span></div>

        <div v-if="isAdminRole()" class="contest-menu-item" @click="handleRoute('edit-contest')">
          <i class="el-icon-medal-1"></i><span>编辑比赛</span></div>
      </div>

    </el-card>
    <router-view></router-view>

  </div>
</template>

<script>
import {getContestDetail} from "@/network/contest";
import ContestTabBar from "@/views/contest/childComp/ContestTabBar";
import {mapGetters} from "vuex";

export default {
  components: {ContestTabBar},
  data() {
    return {
      contestModel: {},
      name: ''
    }
  },
  mounted() {
    let contestId = this.$route.params.contestId;
    getContestDetail(contestId).then(res => {
      this.contestModel = res.data;
    })
  },
  methods: {
    ...mapGetters(
        [
          'isAdminRole'
        ]
    ),
    handleRoute: function (route) {
      const contestId = this.$route.params.contestId;
      this.$router.push({
        name: route,
        params: {
          contestId: contestId
        }
      })
    }
  },

}
</script>

<style lang="scss" scoped>
.contest-detail {


}


.contest-menu {
  display: flex;
  margin: 8px;
  width: 100%;
}

.contest-menu-item {
  flex: 1;
  text-align: center;
}


</style>
